<template>
  <div class="search_wrapper">
      <div class="header">
        <div class="header_left" @click="$router.go(-1)">
            <div class="iconfont back-icon">&#xeb9d;</div>
        </div>
      </div>
      <form class="search_box">
        <div class="con">
          <span class="iconfont">&#xeba5;</span>
          <input type="search" v-model="searchValue" @input="checkInput" placeholder="输入商家、商品名称">
        </div>
        <button type="submit" @click="searchTarget('')">搜索</button>
      </form>
      <div class="keyWords" v-show="!searchValue">
        <div class="area">
          <div class="title">
            <span class="iconfont" @click="clearAllHistory">&#xe60e;</span>
            历史搜索
          </div>
          <div class="button-list">
            <div class="button" v-for="(item, index) in searchHistory" :key="index" @click="searchTarget(item)">{{item}}</div>
          </div>
        </div>
        <div class="area hot_search">
          <div class="title">热门搜索</div>
          <div class="button-list">
            <div class="button">无刺酸菜鱼</div>
            <div class="button">烤肉拌饭</div>
            <div class="button">猪角闽南猪脚饭</div>
            <div class="button">炒海瓜子</div>
            <div class="button">鸡蛋肉泥</div>
          </div>
        </div>
      </div>
      <div class="search_result" v-show="searchValue">
        <p role="button" class="keyword">
          <span class="iconfont">&#xeba5;</span>
          查找<span class="text">“{{searchValue}}”</span>
        </p>
        <ul v-if="restaurantList.length">
          <li v-for="(item, index) of restaurantList" :key="index">
            <router-link :to="{path:'/shop', query:{id: item.id}}">
              <div class="shopitem">
                <img class="pic" :src="imgBaseUrl + item.image_path">
                <div class="info">
                  <div>
                    <p class="title">
                      <span class="name">{{item.name}}</span>
                      <span class="tag">满减</span>
                    </p>
                    <p class="sales">月售 {{item.recent_order_num}} 单</p>
                    <p class="delivery">{{item.float_minimum_order_amount}} 元起送 / 距离{{item.distance}}公里</p>
                  </div>
                  <span class="rating">评价{{item.rating}}</span>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
        <div class="no_result" v-if="emptyResult">
          <img src="@/assets/images/no_data.png" />
          <p class="txt">附近没有搜索结果</p>
          <p class="sub_txt">换个关键词试试吧</p>
        </div>
      </div>
  </div>
</template>

<script>
import { getStore, setStore } from '@/assets/js/mUtils'
export default {
  name: 'Search',
  data () {
    return {
      geohash: '', // msite页面传递过来的地址信息
      searchValue: '', // 搜索内容
      restaurantList: [], // 搜索返回的结果
      searchHistory: [], // 搜索历史记录
      showHistory: true, // 是否显示历史记录，只有在返回搜索结果后隐藏
      emptyResult: false, // 搜索结果为空时显示
      imgBaseUrl: 'https://elm.cangdu.org/img/' // 图片域名地址
    }
  },
  mounted () {
    this.geohash = this.$route.params.geohash
    // 获取搜索历史记录
    if (getStore('searchHistory')) {
      this.searchHistory = JSON.parse(getStore('searchHistory'))
    }
  },
  methods: {
    // 点击提交按钮，搜索结果并显示，同时将搜索内容存入历史记录
    searchTarget (historyValue) {
      if (historyValue) {
        this.searchValue = historyValue
      } else if (!this.searchValue) {
        return
      }
      // 隐藏历史记录
      this.showHistory = false
      // 搜索结果
      this.$api.home.searchRestaurant(this.geohash, this.searchValue).then(res => {
        this.restaurantList = res.data
        this.emptyResult = !this.restaurantList.length
      })
      /**
       * 点击搜索结果进入下一页面时进行判断是否已经有一样的历史记录
       * 如果没有则新增，如果有则不做重复储存，判断完成后进入下一页
       */
      let history = getStore('searchHistory')
      if (history) {
        let checkrepeat = false
        this.searchHistory = JSON.parse(history)
        this.searchHistory.forEach(item => {
          if (item == this.searchValue) { // eslint-disable-line
            checkrepeat = true
          }
        })
        if (!checkrepeat) {
          this.searchHistory.unshift(this.searchValue)
        }
      } else {
        this.searchHistory.unshift(this.searchValue)
      }
      setStore('searchHistory', this.searchHistory)
    },
    // 搜索结束后，删除搜索内容直到为空时清空搜索结果，并显示历史记录
    checkInput () {
      if (this.searchValue === '') {
        this.showHistory = true // 显示历史记录
        this.restaurantList = [] // 清空搜索结果
        this.emptyResult = false // 隐藏搜索为空提示
      }
    },
    // 清除所有历史记录
    clearAllHistory () {
      this.searchHistory = []
      setStore('searchHistory', this.searchHistory)
    }
    // 点击删除按钮，删除当前历史记录
    // deleteHistory (index) {
    //   this.searchHistory.splice(index, 1)
    //   setStore('searchHistory',this.searchHistory)
    // }
  },
  watch: {
    searchValue () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.searchValue) {
        this.restaurantList = []
        return false
      }
      this.timer = setTimeout(() => {
        // 隐藏历史记录
        this.showHistory = false
        // 搜索结果
        this.$api.home.searchRestaurant(this.geohash, this.searchValue).then(res => {
          this.restaurantList = res.data
          this.emptyResult = !this.restaurantList.length
        })
      }, 100)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .header
    height: .88rem
    line-height: .88rem
    font-weight: bold
    color: #999
    padding: 0 .2rem
    text-align: center
    font-size: .34rem
    position: relative
    .header_left, .header_right
      width: .40rem
      position: absolute
      top: 0
    .header_left
      left: .1rem
      .back-icon
        text-align: center
        font-size: .4rem
  .search_box
    display: flex
    height: .56rem
    padding: .2rem
    position: relative
    .con
      line-height: .60rem;
      display: flex
      flex: 1
      font-size: .26rem
      flex-direction: row
      background: #f8f8f8;
      color: #999
      .iconfont
        font-size: .35rem
        margin: 0 .1rem 0 .22rem
        position: absolute
      input
        flex-grow: 1
        border-radius: .026667rem
        background-color: #f8f8f8
        padding: .13rem .3rem .13rem .66rem
        font-size: .28rem
        color: #666
      input::-webkit-input-placeholder
        color:#999
    button
      outline: none
      color: #333
      font-size: .32rem
      background: #fff
      font-weight: 700
      margin-left: .15rem
  .area
    font-size: .28rem
    padding: .15rem .22rem
    .title
      font-size: .32rem
      font-weight: 700
      line-height: .30rem
      padding-bottom: .2rem
      color: #666
      .iconfont
        font-size: .28rem
        color: #bbb
        float: right
    .button-list
      overflow: hidden
      display: flex
      flex-direction: row
      flex-wrap: wrap
      .button
        line-height: .4rem
        margin: .25rem .25rem 0 0
        padding: .15rem .2rem
        background: #f7f7f7
        border-radius: .05rem
  .hot_search
    margin-top: .5rem
  .search_result
    position: absolute
    top: 1.8rem
    left: 0
    right: 0
    bottom: 0
    background: #fff
    .keyword
      color: #999
      font-size: .28rem
      padding: 0 .3rem
      height: .88rem
      display: flex
      align-items: center
      .iconfont
        font-size: .32rem
        margin: .08rem .1rem 0 0
      .text
        color: #333
    .shopitem
      padding: 0 .3rem
      display: flex
      align-items: center
      .pic
        width: 1rem
        height: 1rem
        margin-right: .32rem
        border-radius: .01rem
      .info
        display: flex
        justify-content: space-between
        align-items: center
        flex: 1
        height: 1.5rem
        border-bottom: .01rem solid #f5f5f5
        .title
          display: flex
          align-items: center
          height: .5rem
          line-height: .3rem
          .name
            display: inline-block
            max-width: 5.6rem
            font-size: .28rem
            color: #333
            margin-right: .08rem
            ellipsis()
          .tag
            color: #fff
            font-size: .4rem
            border-radius: .05rem
            height: .6rem
            line-height: .6rem
            text-align: center
            display: inline-block
            padding: 0 .1rem
            transform: scale(.5)
            transform-origin: 0 50%
            background-color: rgb(250, 112, 71)
        .sales, .delivery
          color: #999
      .rating
        color: #999
    .no_result
      margin-top: .8rem
      text-align: center
      img
        width: 3.6rem
      .txt
        font-size: .32rem
        line-height: .5rem
      .sub_txt
        color: #999
</style>
